<template>
  <div class="btheader">
    <div class="row">
      <hamburger class="menu" @menuClicked="menuClicked" ref="menu" />
      <div class="logo"><img src="~assets/image/common/logo.png" alt="" /></div>
      <div class="consult" @click="consult">立即咨询</div>
    </div>
    <ul class="banner" :class="{ extend: flag, cancel: !flag }">
      <li
        v-for="(item, index) in cateList"
        :key="index"
        @click="cateClick(index)"
        :class="{ chosen: $store.state.cateIndex == index }"
      >
        <nuxt-link :to="item.path">
          {{ item.name }}
        </nuxt-link>
      </li>
    </ul>
    <div
      class="window"
      @click="consult"
      :class="{ hide: !popup }"
      :style="setHeight"
    >
      <div class="popup">
        <div class="t">客户咨询</div>
        <div class="img">
          <img src="~assets/image/common/popup.png" alt="" />
        </div>
        <div class="b">微信扫码免费咨询</div>
      </div>
    </div>
  </div>
</template>

<script>
// 此行导入其他文件（如组件，工具js，第三方插件js，json文件，图片文件等）
import Hamburger from "../component/common/Hamburger.vue";
export default {
  name: "Header",
  props: {},
  components: { Hamburger },
  data() {
    return {
      flag: false,
      cateList: [
        { name: "首页", path: "/" },
        { name: "理疗原理", path: "/theory" },
        { name: "成功案例", path: "/case" },
        { name: "新闻资讯", path: "/info" },
        { name: "公益项目", path: "/commonweal" },
        { name: "关于泊天", path: "/about" },
      ],
      popup: false,
      wdheight: 0,
    };
  },
  computed: {
    setHeight() {
      return { height: this.wdheight + "px" };
    },
  },
  created() {},
  mounted() {
    this.wdheight = document.body.scrollHeight;
  },
  methods: {
    menuClicked(flag) {
      this.flag = flag;
    },
    cateClick(index) {
      this.$store.commit("setCate", index);
      this.flag = !this.flag;
      const menu = this.$refs.menu;
      menu.convert();
      // 重新获取页面的整个高度
      setTimeout(() => {
        this.wdheight = document.body.scrollHeight;
        // console.log("wdheight:", this.wdheight);
      }, 100);
    },
    consult() {
      this.popup = !this.popup;
    },
  },
};
</script>

<style scoped>
.btheader {
  position: relative;
}
.btheader .row {
  width: 7.5rem;
  height: 1.03rem;
  background-color: #0c5da9;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.btheader .menu {
  margin-left: 0.35rem;
}
.btheader .logo {
  height: 0.66rem;
}
.btheader .logo img {
  height: 0.66rem;
}
.btheader .consult {
  color: #0c5da9;
  font-size: 0.23rem;
  width: 1.29rem;
  height: 0.49rem;
  line-height: 0.49rem;
  margin-right: 0.35rem;
  text-align: center;
  font-weight: medium;
  background-color: #fff;
}
.btheader .banner {
  width: 7.5rem;
  /* height: 0; */
  z-index: 1;
  overflow: hidden;
  position: absolute;
  top: 1.03rem;
  color: #0b203e;
  background-color: #f9f9f9;
  font-size: 0.28rem;
  padding-left: 0.3rem;
  /* border: 1px solid red; */
  transition: all 0.5s;
}
.btheader .banner li {
  margin-bottom: 0.06rem;
  /* div宽度自适应文字内容 */
  width: fit-content;
  width: -webkit-fit-content;
  width: -moz-fit-content;
}
.extend {
  height: 3.11rem;
  padding-bottom: 0.1rem;
}
.cancel {
  height: 0;
}
.chosen {
  color: #0c5da9;
  border-bottom: 1px solid #0c5da9;
}

.btheader .window {
  width: 7.5rem;
  position: absolute;
  top: 0;
  z-index: 9;
  background-color: rgba(0, 0, 0, 0.5);
}
.btheader .window .popup {
  font-size: 0.28rem;
  width: 4rem;
  height: 3rem;
  background-color: #fff;
  margin: 1.5rem auto 0;
  text-align: center;
  color: #0b203e;
}
.btheader .window img {
  width: 2rem;
}
.btheader .window .b {
  font-size: 0.23rem;
}
.hide {
  display: none;
}
</style>
